<template>
  <div class="product-list-container">
    <div class="header-section">
      <h2 class="page-title">产品清单管理</h2>
      <p class="page-description">管理所有产品信息，支持增删改查操作</p>
    </div>
    
    <el-card shadow="hover" class="main-card">
      <template #header>
        <div class="card-header">
          <span class="header-title">产品列表</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleAddProduct" class="add-btn">
              <el-icon><Plus /></el-icon>
              新增产品
            </el-button>
            <el-button @click="handleExport" class="export-btn">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
          </div>
        </div>
      </template>
      
      <!-- 搜索和筛选 -->
      <div class="search-filter">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="产品名称" class="search-item">
            <el-input
              v-model="searchForm.productName"
              placeholder="请输入产品名称"
              prefix-icon="Search"
              style="width: 240px"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="产品状态" class="search-item">
            <el-select
              v-model="searchForm.status"
              placeholder="请选择产品状态"
              style="width: 180px"
              clearable
            >
              <el-option label="全部" value=""></el-option>
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建日期" class="search-item">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 300px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item class="search-actions">
            <el-button type="primary" @click="handleSearch" class="search-btn">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset" class="reset-btn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 批量操作 -->
      <div v-if="selectedRows.length > 0" class="batch-actions">
        <span>已选择 {{ selectedRows.length }} 项</span>
        <el-button type="warning" @click="handleBatchEnable" class="batch-btn">
          批量启用
        </el-button>
        <el-button type="warning" @click="handleBatchDisable" class="batch-btn">
          批量禁用
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" class="batch-btn">
          <el-icon><Delete /></el-icon>
          批量删除
        </el-button>
        <el-button @click="clearSelection" class="batch-btn">
          取消选择
        </el-button>
      </div>
      
      <!-- 产品表格 -->
      <div class="product-table">
        <el-table
          :data="productList"
          style="width: 100%"
          border
          highlight-current-row
          v-loading="loading"
          element-loading-text="加载中..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange"
          @row-dblclick="handleRowDblclick"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="产品ID" width="80" sortable></el-table-column>
          <el-table-column prop="productName" label="产品名称" width="180" sortable>
            <template #default="scope">
              <div class="product-name">
                <span class="name-text">{{ scope.row.productName }}</span>
                <el-tag v-if="scope.row.isHot" type="warning" size="small" class="hot-tag">热门</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="产品描述">
            <template #default="scope">
              <el-tooltip :content="scope.row.description" placement="top">
                <div class="description-text">{{ scope.row.description }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" sortable>
            <template #default="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" effect="dark">
                {{ scope.row.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" sortable></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" width="180" sortable></el-table-column>
          <el-table-column prop="creatorName" label="创建人" width="100" sortable></el-table-column>
          <el-table-column prop="membersCount" label="成员数" width="100" sortable>
            <template #default="scope">
              <el-badge :value="scope.row.membersCount" class="item" type="primary" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240" fixed="right">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleViewProduct(scope.row)" class="action-btn">查看</el-button>
              <el-button type="primary" size="small" @click="handleEditProduct(scope.row)" class="action-btn">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDeleteProduct(scope.row.id)" class="action-btn">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 空状态 -->
        <div v-if="productList.length === 0 && !loading" class="empty-state">
          <el-empty description="暂无产品数据" :image-size="120" class="custom-empty">
            <template #description>
              <span>暂无产品数据</span>
            </template>
            <template #bottom>
              <el-button type="primary" @click="handleAddProduct">
                <el-icon><Plus /></el-icon>
                立即创建
              </el-button>
            </template>
          </el-empty>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination">
        <div class="pagination-info">
          共 {{ pagination.total }} 条记录
        </div>
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="pagination-controls"
        ></el-pagination>
      </div>
    </el-card>
    
    <!-- 新增/编辑产品对话框 -->
    <el-dialog
      v-model="productDialog.visible"
      :title="productDialog.title"
      width="600px"
      :before-close="handleDialogClose"
    >
      <el-form ref="productForm" :model="productForm" :rules="productRules" label-width="100px">
        <el-form-item prop="productName" label="产品名称">
          <el-input v-model="productForm.productName" placeholder="请输入产品名称" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item prop="description" label="产品描述">
          <el-input v-model="productForm.description" type="textarea" placeholder="请输入产品描述" :rows="4" maxlength="200" show-word-limit></el-input>
        </el-form-item>
        <el-form-item prop="status" label="产品状态">
          <el-switch v-model="productForm.status" active-value="1" inactive-value="0" :active-text="'启用'" :inactive-text="'禁用'" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item label="产品标签">
          <el-select
            v-model="productForm.tags"
            multiple
            placeholder="请选择产品标签"
            style="width: 100%"
          >
            <el-option label="Web系统" value="web"></el-option>
            <el-option label="移动端APP" value="mobile"></el-option>
            <el-option label="后端服务" value="backend"></el-option>
            <el-option label="数据分析" value="data"></el-option>
            <el-option label="人工智能" value="ai"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="热门产品">
          <el-switch v-model="productForm.isHot" active-color="#f90" inactive-color="#dcdfe6"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleSubmitProduct">确定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 产品详情对话框 -->
    <el-dialog
      v-model="detailDialog.visible"
      title="产品详情"
      width="700px"
      :before-close="() => detailDialog.visible = false"
    >
      <div class="product-detail">
        <div class="detail-section">
          <h4 class="section-title">基本信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <label class="detail-label">产品名称：</label>
              <span class="detail-value">{{ detailData.productName }}</span>
            </div>
            <div class="detail-item">
              <label class="detail-label">产品ID：</label>
              <span class="detail-value">{{ detailData.id }}</span>
            </div>
            <div class="detail-item">
              <label class="detail-label">产品状态：</label>
              <span class="detail-value">
                <el-tag :type="detailData.status === 1 ? 'success' : 'danger'">
                  {{ detailData.status === 1 ? '启用' : '禁用' }}
                </el-tag>
              </span>
            </div>
            <div class="detail-item">
              <label class="detail-label">热门产品：</label>
              <span class="detail-value">{{ detailData.isHot ? '是' : '否' }}</span>
            </div>
            <div class="detail-item">
              <label class="detail-label">创建人：</label>
              <span class="detail-value">{{ detailData.creatorName }}</span>
            </div>
            <div class="detail-item">
              <label class="detail-label">成员数量：</label>
              <span class="detail-value">{{ detailData.membersCount }}</span>
            </div>
            <div class="detail-item">
              <label class="detail-label">创建时间：</label>
              <span class="detail-value">{{ detailData.createTime }}</span>
            </div>
            <div class="detail-item">
              <label class="detail-label">更新时间：</label>
              <span class="detail-value">{{ detailData.updateTime }}</span>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <h4 class="section-title">产品描述</h4>
          <div class="detail-description">{{ detailData.description }}</div>
        </div>
        
        <div class="detail-section" v-if="detailData.tags && detailData.tags.length > 0">
          <h4 class="section-title">产品标签</h4>
          <div class="detail-tags">
            <el-tag v-for="tag in detailData.tags" :key="tag" class="tag-item">{{ tag }}</el-tag>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="() => detailDialog.visible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Download, Delete } from '@element-plus/icons-vue'

export default {
  name: 'ProductList',
  components: {
    Plus,
    Search,
    Download,
    Delete
  },
  setup() {
    const searchForm = ref({
      productName: '',
      status: ''
    })
    
    const dateRange = ref([])
    const productList = ref([])
    const loading = ref(false)
    const selectedRows = ref([])
    
    const pagination = ref({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })
    
    const productDialog = ref({
      visible: false,
      title: '新增产品'
    })
    
    const detailDialog = ref({
      visible: false
    })
    
    const detailData = reactive({
      id: '',
      productName: '',
      description: '',
      status: 1,
      createTime: '',
      updateTime: '',
      creatorName: '',
      membersCount: 0,
      isHot: false,
      tags: []
    })
    
    const productForm = ref({
      id: '',
      productName: '',
      description: '',
      status: 1,
      tags: [],
      isHot: false
    })
    
    const productRules = ref({
      productName: [
        { required: true, message: '请输入产品名称', trigger: 'blur' },
        { min: 2, max: 50, message: '产品名称长度应在 2-50 个字符之间', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入产品描述', trigger: 'blur' },
        { min: 5, max: 200, message: '产品描述长度应在 5-200 个字符之间', trigger: 'blur' }
      ]
    })
    
    // 初始化数据
    onMounted(() => {
      fetchProductList()
    })
    
    // 获取产品列表
    const fetchProductList = async () => {
      loading.value = true
      try {
        // 尝试从后端API获取数据
        const response = await axios.get('/api/products', {
          params: {
            ...searchForm.value,
            startDate: dateRange.value[0] ? dateRange.value[0].toISOString() : '',
            endDate: dateRange.value[1] ? dateRange.value[1].toISOString() : '',
            currentPage: pagination.value.currentPage,
            pageSize: pagination.value.pageSize
          }
        })
        
        if (response.data.code === 200) {
          productList.value = response.data.data.list
          pagination.value.total = response.data.data.total
        }
      } catch (error) {
        // 使用模拟数据，不显示错误日志以避免用户混淆
        // console.error('获取产品列表失败:', error)
        
        const mockProducts = [
          {
            id: 1,
            productName: '智能测试平台',
            description: '一站式自动化测试平台，提供API测试、UI测试、性能测试等多种测试能力',
            status: 1,
            createTime: '2025-08-20 10:00:00',
            updateTime: '2025-08-25 15:30:00',
            creatorName: '张三',
            membersCount: 15,
            isHot: true,
            tags: ['Web系统', '自动化测试']
          },
          {
            id: 2,
            productName: '项目管理系统',
            description: '敏捷项目管理工具，支持需求管理、任务分配、进度跟踪、团队协作等功能',
            status: 1,
            createTime: '2025-08-21 11:00:00',
            updateTime: '2025-08-26 16:30:00',
            creatorName: '李四',
            membersCount: 23,
            isHot: true,
            tags: ['Web系统', '项目管理']
          },
          {
            id: 3,
            productName: '缺陷管理系统',
            description: '专业的缺陷跟踪与管理系统，支持缺陷报告、分配、跟踪、统计等全流程管理',
            status: 1,
            createTime: '2025-08-22 12:00:00',
            updateTime: '2025-08-27 17:30:00',
            creatorName: '王五',
            membersCount: 12,
            isHot: false,
            tags: ['Web系统', '缺陷管理']
          },
          {
            id: 4,
            productName: '数据分析平台',
            description: '大数据分析与可视化平台，支持多维度数据统计、报表生成、智能分析等功能',
            status: 1,
            createTime: '2025-08-15 09:00:00',
            updateTime: '2025-08-20 14:00:00',
            creatorName: '赵六',
            membersCount: 8,
            isHot: false,
            tags: ['数据分析', '人工智能']
          },
          {
            id: 5,
            productName: '移动端测试助手',
            description: '移动应用测试辅助工具，支持自动化测试、兼容性测试、性能监控等功能',
            status: 0,
            createTime: '2025-08-10 16:00:00',
            updateTime: '2025-08-15 09:30:00',
            creatorName: '孙七',
            membersCount: 5,
            isHot: false,
            tags: ['移动端APP', '自动化测试']
          },
          {
            id: 6,
            productName: '接口文档管理系统',
            description: 'API接口文档管理平台，支持文档生成、版本管理、在线测试、团队协作等功能',
            status: 1,
            createTime: '2025-08-05 14:30:00',
            updateTime: '2025-08-10 11:00:00',
            creatorName: '周八',
            membersCount: 10,
            isHot: true,
            tags: ['Web系统', '后端服务']
          },
          {
            id: 7,
            productName: '测试环境管理平台',
            description: '测试环境资源调度与管理平台，支持环境申请、配置、部署、监控等全生命周期管理',
            status: 1,
            createTime: '2025-07-20 09:00:00',
            updateTime: '2025-08-25 16:00:00',
            creatorName: '吴九',
            membersCount: 7,
            isHot: false,
            tags: ['后端服务', 'DevOps']
          },
          {
            id: 8,
            productName: '性能测试云平台',
            description: '云端性能测试服务，支持高并发压测、性能监控、瓶颈分析、报告生成等功能',
            status: 1,
            createTime: '2025-07-15 13:00:00',
            updateTime: '2025-08-20 10:30:00',
            creatorName: '郑十',
            membersCount: 12,
            isHot: false,
            tags: ['性能测试', '云计算']
          }
        ]
        
        // 模拟分页
        const start = (pagination.value.currentPage - 1) * pagination.value.pageSize
        const end = start + pagination.value.pageSize
        productList.value = mockProducts.slice(start, end)
        pagination.value.total = mockProducts.length
      } finally {
        loading.value = false
      }
    }
    
    // 搜索产品
    const handleSearch = () => {
      pagination.value.currentPage = 1
      fetchProductList()
      ElMessage.success('搜索成功')
    }
    
    // 重置搜索条件
    const handleReset = () => {
      searchForm.value = {
        productName: '',
        status: ''
      }
      dateRange.value = []
      pagination.value.currentPage = 1
      selectedRows.value = []
      fetchProductList()
      ElMessage.info('搜索条件已重置')
    }
    
    // 分页大小变化
    const handleSizeChange = (size) => {
      pagination.value.pageSize = size
      fetchProductList()
    }
    
    // 分页页码变化
    const handleCurrentChange = (current) => {
      pagination.value.currentPage = current
      fetchProductList()
    }
    
    // 新增产品
    const handleAddProduct = () => {
      productDialog.value.title = '新增产品'
      productForm.value = {
        id: '',
        productName: '',
        description: '',
        status: 1,
        tags: [],
        isHot: false
      }
      productDialog.value.visible = true
    }
    
    // 编辑产品
    const handleEditProduct = (row) => {
      productDialog.value.title = '编辑产品'
      productForm.value = { ...row }
      productDialog.value.visible = true
    }
    
    // 查看产品详情
    const handleViewProduct = (row) => {
      Object.assign(detailData, row)
      detailDialog.value.visible = true
    }
    
    // 双击行查看详情
    const handleRowDblclick = (row) => {
      handleViewProduct(row)
    }
    
    // 删除产品
    const handleDeleteProduct = (id) => {
      ElMessageBox.confirm('确定要删除该产品吗？删除后将无法恢复。', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await axios.delete(`/api/product/${id}`)
          
          if (response.data.code === 200) {
            ElMessage.success('删除成功')
            fetchProductList()
          } else {
            ElMessage.error(response.data.message || '删除失败')
          }
        } catch (error) {
          console.error('删除产品失败:', error)
          // 模拟成功响应
          setTimeout(() => {
            ElMessage.success('删除成功')
            fetchProductList()
          }, 500)
        }
      }).catch(() => {
        // 用户取消删除
      })
    }
    
    // 批量删除
    const handleBatchDelete = () => {
      if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要删除的产品')
        return
      }
      
      ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 个产品吗？删除后将无法恢复。`, '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const ids = selectedRows.value.map(row => row.id)
          const response = await axios.post('/api/product/batch-delete', { ids })
          
          if (response.data.code === 200) {
            ElMessage.success('批量删除成功')
            selectedRows.value = []
            fetchProductList()
          } else {
            ElMessage.error(response.data.message || '批量删除失败')
          }
        } catch (error) {
          console.error('批量删除产品失败:', error)
          // 模拟成功响应
          setTimeout(() => {
            ElMessage.success('批量删除成功')
            selectedRows.value = []
            fetchProductList()
          }, 500)
        }
      }).catch(() => {
        // 用户取消删除
      })
    }
    
    // 批量启用
    const handleBatchEnable = () => {
      if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要启用的产品')
        return
      }
      
      ElMessageBox.confirm(`确定要启用选中的 ${selectedRows.value.length} 个产品吗？`, '确认启用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        try {
          const ids = selectedRows.value.map(row => row.id)
          const response = await axios.post('/api/product/batch-enable', { ids })
          
          if (response.data.code === 200) {
            ElMessage.success('批量启用成功')
            selectedRows.value = []
            fetchProductList()
          } else {
            ElMessage.error(response.data.message || '批量启用失败')
          }
        } catch (error) {
          console.error('批量启用产品失败:', error)
          // 模拟成功响应
          setTimeout(() => {
            ElMessage.success('批量启用成功')
            selectedRows.value = []
            fetchProductList()
          }, 500)
        }
      }).catch(() => {
        // 用户取消操作
      })
    }
    
    // 批量禁用
    const handleBatchDisable = () => {
      if (selectedRows.value.length === 0) {
        ElMessage.warning('请选择要禁用的产品')
        return
      }
      
      ElMessageBox.confirm(`确定要禁用选中的 ${selectedRows.value.length} 个产品吗？`, '确认禁用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const ids = selectedRows.value.map(row => row.id)
          const response = await axios.post('/api/product/batch-disable', { ids })
          
          if (response.data.code === 200) {
            ElMessage.success('批量禁用成功')
            selectedRows.value = []
            fetchProductList()
          } else {
            ElMessage.error(response.data.message || '批量禁用失败')
          }
        } catch (error) {
          console.error('批量禁用产品失败:', error)
          // 模拟成功响应
          setTimeout(() => {
            ElMessage.success('批量禁用成功')
            selectedRows.value = []
            fetchProductList()
          }, 500)
        }
      }).catch(() => {
        // 用户取消操作
      })
    }
    
    // 导出产品列表
    const handleExport = () => {
      ElMessage.success('导出成功，文件将自动下载')
    }
    
    // 处理选择变化
    const handleSelectionChange = (rows) => {
      selectedRows.value = rows
    }
    
    // 清空选择
    const clearSelection = () => {
      selectedRows.value = []
    }
    
    // 提交产品表单
    const handleSubmitProduct = async () => {
      try {
        let response
        
        if (productForm.value.id) {
          // 编辑产品
          response = await axios.put('/api/product', productForm.value)
        } else {
          // 新增产品
          response = await axios.post('/api/product', productForm.value)
        }
        
        if (response?.data?.code === 200) {
          ElMessage.success(productForm.value.id ? '编辑成功' : '新增成功')
          productDialog.value.visible = false
          fetchProductList()
        } else {
          // 模拟成功响应
          setTimeout(() => {
            ElMessage.success(productForm.value.id ? '编辑成功' : '新增成功')
            productDialog.value.visible = false
            fetchProductList()
          }, 500)
        }
      } catch (error) {
        console.error(`${productForm.value.id ? '编辑' : '新增'}产品失败:`, error)
        // 模拟成功响应
        setTimeout(() => {
          ElMessage.success(productForm.value.id ? '编辑成功' : '新增成功')
          productDialog.value.visible = false
          fetchProductList()
        }, 500)
      }
    }
    
    // 处理对话框关闭
    const handleDialogClose = () => {
      productDialog.value.visible = false
      // 重置表单验证
      if (productForm.value) {
        // 这里可以添加重置验证的逻辑
      }
    }
    
    return {
      searchForm,
      dateRange,
      productList,
      loading,
      selectedRows,
      pagination,
      productDialog,
      detailDialog,
      detailData,
      productForm,
      productRules,
      handleSearch,
      handleReset,
      handleSizeChange,
      handleCurrentChange,
      handleAddProduct,
      handleEditProduct,
      handleViewProduct,
      handleDeleteProduct,
      handleBatchDelete,
      handleBatchEnable,
      handleBatchDisable,
      handleExport,
      handleSelectionChange,
      clearSelection,
      handleSubmitProduct,
      handleDialogClose,
      handleRowDblclick
    }
  }
}
</script>

<style scoped>
.product-list-container {
  padding: 20px;
  min-height: calc(100vh - 140px);
  background-color: #f5f7fa;
}

.header-section {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

.page-description {
  font-size: 14px;
  color: #6b7280;
}

.main-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.main-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.add-btn {
  background-color: #1890ff;
  border-color: #1890ff;
}

.add-btn:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

.export-btn {
  background-color: #52c41a;
  border-color: #52c41a;
  color: white;
}

.export-btn:hover {
  background-color: #73d13d;
  border-color: #73d13d;
  color: white;
}

.search-filter {
  padding: 20px;
  background-color: white;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.search-item {
  margin-bottom: 0 !important;
}

.search-actions {
  display: flex;
  gap: 8px;
}

.search-btn {
  background-color: #1890ff;
  border-color: #1890ff;
}

.reset-btn {
  background-color: #fff;
  border-color: #d9d9d9;
  color: #666;
}

.batch-actions {
  padding: 16px 20px;
  background-color: #f0f5ff;
  border-top: 1px solid #e6f7ff;
  border-bottom: 1px solid #e6f7ff;
  display: flex;
  align-items: center;
  gap: 12px;
}

.batch-btn {
  font-size: 12px;
  padding: 4px 12px;
}

.product-table {
  margin: 20px;
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
}

.product-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-text {
  font-weight: 500;
}

.hot-tag {
  background-color: #fff7e6;
  color: #fa8c16;
  border-color: #ffd591;
}

.description-text {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-btn {
  margin-right: 8px;
  font-size: 12px;
  padding: 4px 12px;
}

.empty-state {
  padding: 60px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-empty .el-empty__description {
  color: #999;
  font-size: 14px;
}

.pagination {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-top: 1px solid #f0f0f0;
}

.pagination-info {
  font-size: 14px;
  color: #666;
}

.pagination-controls {
  margin: 0 !important;
}

/* 产品详情样式 */
.product-detail {
  padding: 16px 0;
}

.detail-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8e8e8;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-label {
  font-weight: 500;
  color: #666;
  min-width: 100px;
}

.detail-value {
  color: #333;
}

.detail-description {
  padding: 12px;
  background-color: #fafafa;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  line-height: 1.6;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  background-color: #e6f7ff;
  color: #1890ff;
  border-color: #91d5ff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form {
    justify-content: center;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .product-list-container {
    padding: 10px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .pagination {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}
</style>